<template>

    <el-skeleton v-if="edit.loading" animated  />

    <div v-else>
        <div class="d_flex flex_jc_sb mb10">
            <div class="d_flex flex_ai_c">
                <div class="mr10">
                    <el-avatar size="large" :src="user.avatar" />
                </div>
                <div>
                    <div class="mb5">
                        <span>{{user.nickname}}</span>
                        <el-tag size="small" v-if="user.storeManager">店长</el-tag>
                    </div>
                    <div class="bold mb5">{{user.mobile}}</div>
                </div>
            </div>
            <el-space>
                <!--                <el-button type="primary">编辑</el-button>-->
                <el-button type="warning" @click="btnEvent('balance')">调整余额</el-button>
                <el-button type="warning" @click="btnEvent('points')">调整积分</el-button>
                <el-button type="warning" @click="btnEvent('reward')">调整佣金</el-button>
            </el-space>
        </div>

        <div class="d_flex flex_jc_sb mb10">
            <el-statistic title="余额" :value="user.balance" />
            <el-statistic title="积分" :value="user.points" />
            <el-statistic title="佣金" :value="user.reward" />
            <el-statistic title="总消费金额" :value="user.total_price" />
            <!--            <el-statistic title="总订单" :value="" />-->
        </div>


        <el-tabs model-value="info">
            <el-tab-pane label="用户信息" name="info">
                <div>
                    <mi-li label="昵称">{{user.nickname}}</mi-li>
                    <mi-li label="手机号">{{user.mobile}}</mi-li>
                    <mi-li label="注册时间">{{user.create_time}}</mi-li>
                </div>
            </el-tab-pane>
            <el-tab-pane label="消费记录" name="order">
                <user-order :where="{'user_id': user.id}" />
            </el-tab-pane>
            <!--            <el-tab-pane label="余额明细" name="balance">-->
            <!--                <user-balance :where="{'user_id': user.id}" />-->
            <!--            </el-tab-pane>-->
            <!--            <el-tab-pane label="积分明细" name="points">-->
            <!--                <user-points :where="{'user_id': user.id}" />-->
            <!--            </el-tab-pane>-->
            <el-tab-pane label="佣金明细" name="reward">
                <user-reward :where="{'user_id': user.id}" />
            </el-tab-pane>
            <el-tab-pane label="样品基金明细" name="storeManagerBalance">
                <user-store-manager-balance :where="{'user_id': user.id}" />
            </el-tab-pane>
        </el-tabs>

    </div>
    <mi-dialog v-model="setAccount.show" width="400" :title="setAccount.info.title" >
        <user-set-account :info="edit.info" :model="setAccount.info.model" />
    </mi-dialog>

</template>

<script setup lang="ts">

import {computed, inject, onBeforeMount, onMounted, provide, reactive, ref} from "vue"
import Edit from "@/model/edit"
import userService from "@/service/user"
import UserOrder from "@/views/site/user/components/userOrder.vue";
import UserBalance from "@/views/site/user/components/userBalance.vue";
import UserPoints from "@/views/site/user/components/userPoints.vue";
import UserReward from "@/views/site/user/components/userReward.vue";
import UserSetAccount from "@/views/site/user/components/userSetAccount.vue";
import UserStoreManagerBalance from "@/views/site/user/components/userStoreManagerBalance.vue";


const props = withDefaults(defineProps<{
    id?: number,
}>(),{
    id: 0
})

const edit = inject("detail", new Edit({}))

const user = computed(() => {
    return edit.info
})

const btnEvent = (event:string) => {
    switch (event) {
        case 'balance':
            setAccount.show = true
            setAccount.info.title = '调整余额'
            setAccount.info.model = 'balance'
            break
        case 'points':
            setAccount.show = true
            setAccount.info.title = '调整积分'
            setAccount.info.model = 'points'
            break
        case 'reward':
            setAccount.show = true
            setAccount.info.title = '调整佣金'
            setAccount.info.model = 'reward'
            break
    }
}

const setAccount = reactive(new Edit({}))

provide("setAccount", setAccount)


onMounted(() => {
    edit.init(async () => {
        edit.info = await userService.find(props.id)
    })
})



</script>

<style scoped>

</style>
